<template>
  <div style="width: 100%;padding: 10px">
    <el-card class="box-card">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line"></div>
            <span class="details_HeaderTitle">抢拍活动详情</span>
          </div>
        </div>
        <div class="deleted_OrderHeader">
          <el-row :gutter="24">
            <el-col :span="8">
              <div style="width: 450px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                <span class="deleted_Row_Headings">团购名称：</span>
                <span class="deleted_OrderTitle">{{form.name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">活动状态：</span>
              <span class="deleted_OrderTitle" v-if="form.status == 0" style="color: rgb(64, 158, 255)">待审核</span>
              <span class="deleted_OrderTitle" v-if="form.status == 1" style="color: rgb(64, 158, 255)">进行中</span>
              <span class="deleted_OrderTitle" v-if="form.status == 2" style="color: rgb(64, 158, 255)">已关闭</span>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">活动名称：</span>
              <span class="deleted_OrderTitle">第{{form.name}}期</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">加价幅度：</span>
              <span class="deleted_OrderTitle">{{form.addPrice}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">平台佣金：</span>
              <span class="deleted_OrderTitle">{{form.brokerage}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">压金金额：</span>
              <span class="deleted_OrderTitle">{{form.grabFee}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="24">
              <span class="deleted_Row_Headings">规则描述：</span>
              <span class="deleted_OrderTitle">{{form.content}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="product_header_name" style="">
          <span style="font-size: 18px;color:#409EFF;margin: 10px 10px;">商品明细</span>
        </div>
        <el-table
          :data="form.itemList"
          border
          style="width: 100%">
          <el-table-column
            label="排序"
            type="index"
            width="50"
            fixed
          >
          </el-table-column>
          <el-table-column label="商品图片" width="80">
            <template slot-scope="scope">
              <img :src="scope.row.thumbnail" style="width: 100%; height: 100%;">
            </template>
          </el-table-column>
          <el-table-column
            label="商品名">
            <template slot-scope="{row}">
              <span>{{row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="场次">
            <template slot-scope="{row}">
              <el-select :disabled = "disabled" v-model="row.num" placeholder=请输入场次>
                <el-option    label="上午场" :value=Number(0)></el-option>
                <el-option   label="下午场" :value=Number(1)></el-option>
              </el-select>            </template>
          </el-table-column>
          <el-table-column
            label="库存">
            <template slot-scope="{row}">
              <span>{{row.stock}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="规格"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{ row.spec }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="产品价格"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{ row.price == null ? 0 :  row.price }}元</span>
            </template>
          </el-table-column>
          <el-table-column
            label="单位"
            width="70"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
            prop="quantity"
            align="right"
            width="70">
          </el-table-column>
        </el-table>
        <div class="product_header_name" style="">
          <span style="font-size: 18px;color:#409EFF;margin: 10px 10px;">抢拍等级</span>
        </div>
        <el-card class="box-card">
          <el-row
            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; height: 40px;">
            <el-col
              :span="2"
              style="border: 1px solid #edf0f4; border-bottom: none; text-align: center; padding: 5px; height: 100%; font-size: 15px; line-height: 30px; color: #13ce66;"
            >
              {{ '抢拍列表' }}
            </el-col>
            <el-col :span="22"
                    style="display: flex; justify-content: flex-end; border-bottom: 1px solid #edf0f4; height: 100%;">
              <el-button v-show="distributionSwitch" v-permission="['distribution.add']"
                         style="margin-right: 18px;margin-bottom: 5px" type="primary" plain size="mini"
                         @click="showDistribution">添加规则
              </el-button>
            </el-col>
          </el-row>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="createDate" label="创建日期"/>
            <el-table-column prop="bonusRate" label="佣金"/>
            <el-table-column prop="children" label="推广会员数"/>
            <el-table-column prop="childrenGrade" label="下级会员数"/>
            <el-table-column prop="grade" label="等级0…6"/>
            <el-table-column prop="name" label="等级名称"/>
            <el-table-column prop="total" label="期下会员数"/>
            <el-table-column  fixed="right" align="center" label="操作" width="100">
              <template slot-scope="scope">
                <el-button v-permission="['distribution.edit']" type="text" size="small"
                           @click="editHandleClick(scope.row)">编辑
                </el-button>
                <el-button v-permission="['distribution.del']" type="text" size="small" @click="delHandleClick(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                      @pagination="getList"/>
          <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
              <el-tabs v-model="activeName">
                <el-tab-pane label="抢拍设置" name="proxy">
                      <el-table border :data="popupShootList">
                        <el-table-column label="佣金" align="center" prop="bonusRate">
                          <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.bonusRate"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column label="推广会员数"   align="center" width="113px">
                          <template slot-scope="{row}">
                            <el-input type="number" v-model="row.children"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column label="下级会员数"   align="center" width="113px">
                          <template slot-scope="{row}">
                            <el-input type="number" v-model="row.childrenGrade" ></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column label="等级0…6" align="center" width="113px">
                          <template slot-scope="{row}">
                            <el-input type="number" v-model="row.grade" oninput="if(value>6)value=6"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column label="等级名称" align="center" width="113px">
                          <template slot-scope="{row}">
                            <el-input  v-model="row.name"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column label="期下会员数" align="center" width="113px">
                          <template slot-scope="{row}">
                            <el-input type="number" v-model="row.total"></el-input>
                          </template>
                        </el-table-column>
                      </el-table>
                </el-tab-pane>
              </el-tabs>
            <span slot="footer" class="dialog-footer">
          <el-button @click="resetForm('distributionForm')">取 消</el-button>
          <el-button type="primary"  @click="saveDistribution('distributionForm')">确 定</el-button>
        </span>
          </el-dialog>
        </el-card>
      </div>
    </el-card>
  </div>
</template>
<script>
  import Pagination from '@/components/Pagination';
  import { find, cancel, audit,unAudit,orderList,getOrderList } from '@/api/auction'
  import permission from '@/directive/permission/index.js'
  import {list as auctionGradeList , del as auctionGradeDel ,save as auctionGradeSave ,find as auctionGradeFind ,update as auctionGradeUpdate } from "@/api/auctionGrade";
  // 权限判断指令
  export default {
    name: 'groupBuy-view',
    data() {
      return {
        disabled:true,
        distributionSwitch: true,
        dialogVisible:false,
        activeName:'proxy',
        popupShootList: [{
          auctionId:'',
          bonusRate:'',
          children:'',
          childrenGrade:'',
          createDate:'',
          grade:'',
          id:'',
          modifyDate:'',
          name:'',
          total:''
        }
        ],
        tableData: [],
        snapForm:[],
        requests:'',
        dialogTitle:'',
        orders:[],
        pageNum:1,
        itemList:[],
        receiverVisible:false,
        pageSize:10,
        total:0,
        groupId: '',
        form: {
          id: ''
        },
      }
    },
    components:{Pagination},
    directives: {permission,},
    watch: {
      $route(newVal, oldVal) {
        if (newVal.name == 'groupBuy-view' && newVal.query.id != this.form.id) {
          this.loadGroup(this.$route.query.id)
        }
      }
    },
    created() {
      this.getList()
      this.form.id = this.$route.query.id
      this.loadGroup(this.form.id)
    },
    methods: {
      toDo(data){
          this.receiverVisible=true
        getOrderList({
          periodId:data.id
        }).then(res=>{
            this.itemList=res.data.orderItem
        })
      },

      releaseProduct(){
        var product={
          id:this.form.id,
        }
        this.$confirm('确认审核', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          audit(product).then(res=>{
            this.loadGroup(this.form.id)
          })
        })

      },
      loadOrderList(data){
        orderList({
          pageSize:this.pageSize,
          pageNum:this.pageNum,
          groupBuyId:data
        }).then(res=>{
          this.orders=res.data.data
          this.total=res.data.total
        })
      },
      loadGroup(id) {
        find(id).then(res => {
          this.form = res.data.auction
          this.groupId = res.data.auction.itemList[0].groupBuyId
          this.loadOrderList(this.groupId)
        })
      },
      showDistribution() { // 弹窗
        this.resetForm()
        this.requests = 'save'
        this.dialogTitle = '添加抢拍等级'
        this.dialogVisible =true
      },

      getList() { // 获取数据
        const params = new URLSearchParams()
        params.append('auctionId', this.$route.query.id)
        params.append('pageNum', this.pageNum)
        params.append('pageSize', this.pageSize)
        auctionGradeList(params).then(res => {
          this.tableData = []
          res.data.data.forEach((item)=>{
            item.createDate = this.formatDateAndTime(item.createDate)
            this.tableData.push(item)
          })
          this.total = res.data.total
          this.pageNum = res.data.pageable.pageNum
          this.pageSize = res.data.pageable.pageSize
        }).catch(err => {
            console.log(err)
          })
      },
      formatDateAndTime (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        return y + '-' + MM + '-' + d + " " + h + ":" + m + ":" + s;
      },
      delHandleClick(data) { // 删除规则
        this.$confirm('此操作将永久删除该规则, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          auctionGradeDel(data.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            if(this.tableData.length == 1){
              if(this.pageNum > 1){
                this.pageNum = this.pageNum -1
              }
            }
            this.getList()
          }).catch(err => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      editHandleClick(data) { // 修改规则
        this.dialogTitle = '修改抢拍等级'
        this.dialogVisible =true
        // let row = JSON.parse(JSON.stringify(data))
        // this.popupShootList[0] = row
        this.popupShootList[0].auctionId=data.auctionId;
        this.popupShootList[0].bonusRate=data.bonusRate;
        this.popupShootList[0].children=data.children;
        this.popupShootList[0].childrenGrade=data.childrenGrade;
        this.popupShootList[0].createDate=data.createDate;
        this.popupShootList[0].grade=data.grade;
        this.popupShootList[0].id=data.id;
        this.popupShootList[0].modifyDate=data.modifyDate;
        this.popupShootList[0].name=data.name;
        this.popupShootList[0].total=data.total;
        this.requests = 'update'
      },
      saveDistribution(formName) {
        if(this.popupShootList[0].bonusRate == ''){
          this.$message('佣金不能为空');
          return false;
        }else
        if(this.popupShootList[0].children == ''){
          this.$message('推广会员数不能为空');
          return false;
        }else
        if(this.popupShootList[0].childrenGrade == ''){
          this.$message('下级会员数不能为空');
          return false;
        }else
        if(this.popupShootList[0].grade == ''){
          this.$message('等级0…6不能为空');
          return false;
        }else
        if(this.popupShootList[0].name == ''){
          this.$message('等级名称不能为空');
          return false;
        }else
        if(this.popupShootList[0].total == ''){
          this.$message('期下会员数不能为空');
          return false;
        }






        if(this.requests == 'save'){
          let params = {
            "auctionId": this.$route.query.id,
            "bonusRate": this.popupShootList[0].bonusRate,
            "children": this.popupShootList[0].children,
            "childrenGrade": this.popupShootList[0].childrenGrade,
            "createDate": new Date().getTime(),
            "grade": this.popupShootList[0].grade,
            "modifyDate": new Date().getTime(),
            "name": this.popupShootList[0].name,
            "total": this.popupShootList[0].total,
          }
          auctionGradeSave(params).then(()=>{
            this.getList()
            this.dialogVisible = false
          })
        }
        if(this.requests == 'update'){
          let params = {
            "auctionId": this.popupShootList[0].auctionId,
            "bonusRate": this.popupShootList[0].bonusRate,
            "children": this.popupShootList[0].children,
            "childrenGrade": this.popupShootList[0].childrenGrade,
            "grade": this.popupShootList[0].grade,
            "id":this.popupShootList[0].id,
            "name": this.popupShootList[0].name,
            "total": this.popupShootList[0].total,
          }
          // let params = this.popupShootList[0]
          auctionGradeUpdate(params).then(()=>{
            this.getList()
            this.dialogVisible = false
          })
        }
      },

      handleClose(done) { // 关闭弹窗
        this.$confirm('确认关闭？')
          .then(_ => {
            this.dialogVisible = false
            this.$refs.distributionForm.resetFields()
            this.getList()
            done()
          })
          .catch(_ => {
          })
      },
      resetForm(formName) { // 清空列表
        console.log("1321321321")
       this.popupShootList =
        [{
          auctionId:'',
          bonusRate:'',
          children:'',
          childrenGrade:'',
          createDate:'',
          grade:'',
          id:'',
          modifyDate:'',
          name:'',
          total:''
        }]
      },
    }
  }
</script>

<style scoped>
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }

  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409EFF;
  }

  .details_HeaderTitle {
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 150px;
  }

  .deleted_OrderHeader {
    padding-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
  }

  .deleted_OrderTitle {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_Row_Headings {
    color: #666666;
  }

  .deleted_OrderName {
    color: #409EFF;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 5px #409EFF solid;
    margin-bottom: 20px;
    background-color: #f2f2f2;
    margin-top: 20px;
  }

  /deep/ .el-form-item {
    margin-bottom: 0px;
  }

  /deep/ .el-dialog__body {
    padding-top: 0px;
  }

  .el-dialog-div {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .box-card {
    width: 100%;
    box-sizing: border-box;
  }

  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409EFF;
  }

  .details_HeaderTitle {
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 150px;
  }

  .deleted_OrderHeader {
    padding-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
  }

  .deleted_OrderTitle {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_Row_Headings {
    color: #666666;
  }

  .deleted_OrderName {
    color: #409EFF;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 5px #409EFF solid;
    margin-bottom: 20px;
    background-color: #f2f2f2;
    margin-top: 20px;
  }

  /deep/ .el-form-item {
    margin-bottom: 0px;
  }

  /deep/ .el-dialog__body {
    padding-top: 0px;
  }

  .el-dialog-div {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

</style>
